import {Directive, HostListener} from "@angular/core";
import {Events} from "ionic-angular";

@Directive({
    selector: '[adpmenutoggle]'
})
export class AdpMenuToggleDirective {

    private static wHeight =  window.innerHeight;
    constructor(private events: Events) {
    }

    @HostListener('click')
    toggle() {
        let menuDom = document.querySelector('adp-menu') as HTMLElement;
        let menuInner = document.querySelector('.menu-inner') as HTMLElement;
        menuDom.style.display = 'block';

        setTimeout(() => {
            let menuHeader = document.querySelector('adp-menu .menu-header') as HTMLElement;
            let menuScroll = document.querySelector('adp-menu .scroll-content') as HTMLElement;
            let menuFooter = document.querySelector('adp-menu .menu-footer') as HTMLElement;
            menuScroll.style.height = AdpMenuToggleDirective.wHeight - menuHeader.clientHeight - menuFooter.clientHeight - 4 + 'px';
            menuScroll.style.marginTop = menuHeader.clientHeight + 2 + 'px';
        }, 0);

        setTimeout(() => {
            menuInner.style.transform = 'translateX(0)';
        }, 200);
        this.events.publish('menu open');
    }
}
